<template>
    <div class="content">
        <mt-header fixed title="建筑物列表">
            <div slot="left">
                <mt-button icon="back" @click.native="goback()">返回</mt-button>
            </div>
        </mt-header>
        <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"   :autoFill="autoFill"  ref="loadmore">
       <mt-cell v-for="(item) in buildings" :key="item.buildingid" :title="item.buildingname" :label="item.address" @click.native="goToDetail(item.buildingid)">
    </mt-cell>
        </mt-loadmore>
     <not-data-page v-show="buildings.length === 0"> </not-data-page>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
export default {
  data () {
    return {
      buildings: [],
      allLoaded: false,
      autoFill: false,
      page: 1,
      pages: 0,
      pagesize: 10
    }
  },
  created () {
    this.mybuildinglist(0)
  },
  components: {
    notDataPage
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    async mybuildinglist (type) {
      const res = await this.$store.dispatch('mybuildinglist', {
        page: this.page,
        pagesize: this.pagesize
      })
      if (res.status) {
        this.pages = res.context && res.context ? res.context.length : 0
        type ? this.buildings = [...this.buildings, ...res.context] : this.buildings = [...res.context]
      }
    },
    goToDetail (buildingid) {
      this.$router.push({
        path: '/mybuildingdetails',
        query: {buildingid}
      })
    },
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < this.pagesize) {
        this.allLoaded = true
        return
      }
      this.page++
      await this.mybuildinglist(1)
    }

  }
}
</script>
<style lang="less" scoped>
.content{
  padding-top: 40px;
}
</style>
